<template>
	<view class="container">
		<!-- 头部安全距离 -->
		<view class="status_bar"></view>
		<!-- 主要信息 -->
		<view class="describe">
			<view class="theme">权益信息</view>
			<!-- 图片 -->
			<image src="../../static/images/nft/nft_header_bg.png" mode="" class="describe_image"></image>
			<view class="describe_content">
				<view class="describe_content_title">权益信息</view>
				<view class="">1.生效日期: 2022-9-1 至 2022-9-14</view>
				<view class="">2.权益类型: 本产品类型为商品</view>
				<view class="">3.限购数量: 每人限制购买1个</view>
			</view>
			<view class="describe_content">
				<view class="describe_content_title">权益信息</view>
				<view class="">1.生效日期: 2022-9-1 至 2022-9-14</view>
				<view class="">2.权益类型: 本产品类型为商品</view>
				<view class="">3.限购数量: 每人限制购买1个</view>
			</view>
			<view class="describe_content">
				<view class="describe_content_title">权益信息</view>
				<view class="">1.生效日期: 2022-9-1 至 2022-9-14</view>
				<view class="">2.权益类型: 本产品类型为商品</view>
				<view class="">3.限购数量: 每人限制购买1个</view>
			</view>
			<view class="describe_content">
				<view class="describe_content_title">权益信息</view>
				<view class="">1.生效日期: 2022-9-1 至 2022-9-14</view>
				<view class="">2.权益类型: 本产品类型为商品</view>
				<view class="">3.限购数量: 每人限制购买1个</view>
			</view>
			<view class="describe_content">
				<view class="describe_content_title">权益信息</view>
				<view class="">1.生效日期: 2022-9-1 至 2022-9-14</view>
				<view class="">2.权益类型: 本产品类型为商品</view>
				<view class="">3.限购数量: 每人限制购买1个</view>
			</view>
			<view class="describe_content">
				<view class="describe_content_title">权益信息</view>
				<view class="">1.生效日期: 2022-9-1 至 2022-9-14</view>
				<view class="">2.权益类型: 本产品类型为商品</view>
				<view class="">3.限购数量: 每人限制购买1个</view>
			</view>
		</view>
		<view class="under_box">
			<u-toast ref="uToast"></u-toast>
			<view class="join_btn">
				<u-button text="兑换" @click="showToast(toastInfo)" color="var(--echo-main-color)" shape="circle">
				</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background: $echo-nft-bg-color;
		min-height: 100vh;

		// 顶部安全距离
		.status_bar {
			height: var(--status-bar-height);
		}

		// 封面容器
		.cover_container {
			height: 700rpx;
			background-color: $echo-nft-card-bg-color;
			display: flex;
			justify-content: center;
			align-items: center;

			// 封面
			.cover {
				width: 500rpx;
				height: 500rpx;
				text-align: center;

				image {
					width: 400rpx;
					height: 400rpx;
					border-radius: 50%;
					overflow: hidden;
				}
			}
		}

		// 底部主要信息
		.describe {
			position: relative;
			z-index: 99;
			border-top-left-radius: 40rpx;
			border-top-right-radius: 40rpx;
			background: $echo-nft-bg-color;
			padding: 30rpx;
			color: #fff;


			.theme {
				text-align: center;
				color: #999;
				margin-bottom: 30rpx;
			}

			&_image {
				height: 300rpx;
				width: 100%;
				border-radius: 8rpx;
			}

			&_content {
				margin: 30rpx 0;
				line-height: 60rpx;

				&_title {
					font-size: $echo-font-size-title
				}
			}
		}

		.under_box {
			position: fixed;
			padding: 40rpx;
			bottom: 0;
			z-index: 100;
			left: 0;
			width: 100%;
			background-color: $echo-nft-bg-color;
			border-top: 0.5px solid #58595a;

			.join_btn {
				width: 90%;
			}
		}

	}
</style>
